<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="https://unpkg.com/react@17/umd/react.production.min.js" rel="external nofollow" rel="external nofollow"></script>

    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" rel="external nofollow" rel="external nofollow"></script>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" rel="external nofollow" rel="external nofollow"></script>
</head>

<body>
    <div id="test"></div>
    <script type="text/babel">
        class Person extends React.Component{ 
            render(){ 
                const {name,sex='snk',age}=this.props ; //props是只读的   
                return(
        <ul>
            <li>姓名:{name}</li>
            <li>性别:{sex}</li>
            <li>年龄:{age+1}</li>
        </ul>
        ) } 
    } 
    let p={name:'yangxiang', sex:'nan', age:18};
     ReactDOM.render(<Person {...p} />,document.getElementById('test'));
    </script>
</body>

</html>